<!--  -->
<template>
  <div class="max-h-[40%] overflow-y-scroll chatWord space-y-3" ref="chatRef">
    <TransitionGroup
      enter-active-class="animate__animated animate__fadeInUp"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <div
        v-for="(item, index) in props.words"
        :key="index"
        :class="'bubble bubble-' + item.direction"
      >
        <div class="text">
          {{ item.label }}
          <transition name="el-fade-in-linear">
            <div v-if="isSpeaking && speakingIndex == index" class="speaking"></div>
          </transition>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
import type { duixWordsList } from '@/types/duixTypes'
import { computed, ref, toRefs, watch } from 'vue'

const props = defineProps<{ words: duixWordsList[]; isSpeaking?: boolean }>()
const { words } = toRefs(props)
const chatRef = ref<HTMLElement>()

const speakingIndex = computed(() => {
  return props.words.findLastIndex((e) => e.direction === 'ans')
})

watch(
  words,
  () => {
    setTimeout(() => {
      chatRef.value?.scrollTo({
        top: chatRef.value.scrollHeight,
        behavior: 'smooth'
      })
    }, 500)
  },
  { deep: true }
)
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.chatWord {
  padding-bottom: 1rem;
  &::-webkit-scrollbar {
    display: none;
  }
}
.bubble {
  position: relative;

  width: 100%;
  margin-left: 12px;
  max-width: 80%;
  display: flex;
  .text {
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    .speaking {
      position: absolute;
      right: 5px;
      width: 1rem;
      height: 1rem;
      overflow: hidden;
      // background: url(@/assets/speaking.svg);
      background-size: 100% 100%;
    }
  }
  .text:before {
    width: 0;
    position: absolute;
    top: 12px;
    border-style: solid;
    content: '';
  }
}
.bubble-ask {
  text-align: right;
  justify-content: flex-end;
  .text {
    background-color: #00bfff;
    box-shadow: 0 0 5px #00bfff;
  }
  .text:before {
    right: -12px;
    border-color: transparent #00bfff;
    border-width: 0 0 12px 12px;
  }
}
.bubble-ans {
  color: #282828;
  .text {
    background-color: #95ec69;
    box-shadow: 0 0 5px #95ec69;
  }
  .text:before {
    left: -12px;
    border-color: transparent #95ec69;
    border-width: 0 12px 12px 0;
  }
}
</style>
